<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="assets/css/fontawesome.min.css">

<title>SAT>IP Main Web Page</title>

<script src="assets/js/menu.js"></script>
<script src="assets/js/loadxmldoc.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
	// ajax refresh callback
	function updatePage() {
		loadXMLDoc("SatPI.xml");
	}
	function updateEntry(infopage, xmlValue) {
		if (infopage.innerHTML != xmlValue.innerHTML) {
			infopage.innerHTML = xmlValue.innerHTML;
		}
	}
	// function called when xml is loaded
	function xmlloaded(xml) {
		appdata = xml.getElementsByTagName('appdata');
		ssdpdata = xml.getElementsByTagName('ssdp');
		configdata = xml.getElementsByTagName('configdata');

		let uptime = appdata[0].getElementsByTagName('uptime')[0].innerHTML;
		let sec = uptime % 60;
		let min = Math.round((uptime/60) - 0.5);
		let hours = Math.round((min/60) - 0.5);
		let days = Math.round((hours/24) - 0.5);
		min -= (hours * 60);
		hours -= (days * 24);

		let InfoPage = document.getElementById('InfoPage');
		InfoPage.rows[1].cells[1].innerHTML = days + ' days ' + hours + ' hours ' + min + ' min ' + sec + ' sec';

		updateEntry(InfoPage.rows[0].cells[1], appdata[0].getElementsByTagName('appversion')[0]);
		updateEntry(InfoPage.rows[2].cells[1], appdata[0].getElementsByTagName('uuid')[0]);
		updateEntry(InfoPage.rows[3].cells[1], ssdpdata[0].getElementsByTagName('bootID')[0]);
		updateEntry(InfoPage.rows[4].cells[1], ssdpdata[0].getElementsByTagName('deviceID')[0]);
		updateEntry(InfoPage.rows[5].cells[1], ssdpdata[0].getElementsByTagName('ttl')[0]);
		updateEntry(InfoPage.rows[6].cells[1], configdata[0].getElementsByTagName('ipaddress')[0].getElementsByTagName('value')[0]);
		updateEntry(InfoPage.rows[7].cells[1], configdata[0].getElementsByTagName('bindipaddress')[0].getElementsByTagName('value')[0]);
		updateEntry(InfoPage.rows[8].cells[1], configdata[0].getElementsByTagName('rtspport')[0].getElementsByTagName('value')[0]);

		if (InfoPage.rows[9].cells[1].innerText == "...") {
			let ip = configdata[0].getElementsByTagName('ipaddress')[0].getElementsByTagName('value')[0].innerHTML;
			let port = configdata[0].getElementsByTagName('httpport')[0].getElementsByTagName('value')[0].innerHTML;
			let xmldesc = configdata[0].getElementsByTagName('xmldesc')[0].getElementsByTagName('value')[0].innerHTML;
			let link = 'http://' + ip + ':' + port + '/' + xmldesc;
			InfoPage.rows[9].cells[1].innerHTML = '<a href="' + link + '" class="btn-info btn-sm" role="button">Show</a>';
		}
	}

	function stopSatPI() {
		$('#StopDialog').modal();
	}

	function restartSatPI() {
		$('#RestartDialog').modal();
	}

</script>

</head>
<body>
<div id="menu"></div>

<!-- Stop Dialog -->
<div class="modal fade" id="StopDialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Stop SatPI Server?</h4>
				<button type="button" class="close" data-dismiss="modal">×</button>
			</div>
			<div class="modal-body">
				Are you sure?
			</div>

			<!-- Modal footer -->
			<div class="modal-footer">
				<a href="STOP" class="btn btn-danger" role="button">Yes</a>
				<button type="button" class="btn btn-success" data-dismiss="modal">No</button>
			</div>
		</div>
	</div>
</div>

<!-- Restart Dialog -->
<div class="modal fade" id="RestartDialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Restart SatPI Server?</h4>
				<button type="button" class="close" data-dismiss="modal">×</button>
			</div>
			<div class="modal-body">
				Are you sure?
			</div>

			<!-- Modal footer -->
			<div class="modal-footer">
				<a href="RESTART" class="btn btn-danger" role="button">Yes</a>
				<button type="button" class="btn btn-success" data-dismiss="modal">No</button>
			</div>
		</div>
	</div>
</div>

<div class="p-1">
<div class=" window-start container border rounded-bottom">
	<div class="window-name">
		<p>Server Info Page</p>
	</div>
	<div class="p-1 table-responsive table-text-size">
		<table id="InfoPage" class="table table-bordered table-sm">
			<tr><td class=\"col-xs-1\">Version</td><td class="col-xs-2">...</td> </tr>
			<tr><td class=\"col-xs-1\">Uptime</td><td class="col-xs-2">...</td> </tr>
			<tr><td class=\"col-xs-1\">UUID</td><td class="col-xs-2">...</td> </tr>
			<tr><td class=\"col-xs-1\">Boot ID</td><td class="col-xs-2">...</td> </tr>
			<tr><td class=\"col-xs-1\">Device ID</td><td class="col-xs-2">...</td> </tr>
			<tr><td class=\"col-xs-1\">SSDP TTL</td><td class="col-xs-2">...</td> </tr>
			<tr><td class=\"col-xs-1\">IP Address</td><td class="col-xs-2">...</td> </tr>
			<tr><td class=\"col-xs-1\">Bind IP Address</td><td class="col-xs-2">...</td> </tr>
			<tr><td class=\"col-xs-1\">RTSP Port</td><td class="col-xs-2">...</td> </tr>
			<tr><td class=\"col-xs-1 \">Satip Description XML</td><td class="col-xs-2">...</td> </tr>
		</table>
		<button class="btn btn-danger" type="button" onclick="stopSatPI()"><i class="fas fa-power-off"></i> Stop</button>
		<button class="btn btn-warning" type="button" onclick="restartSatPI()"><i class="fas fa-redo"></i> Restart</button>
		<script>
			// make menu
			document.getElementById('menu').innerHTML = buildmenu();
			setMenuItemActive('index');

			// Call the ajax refresh each refresh_time seconds
			var refresh_time = 2000;
			updatePage();
			setInterval('updatePage()', refresh_time);
		</script>
	</div>
</div>
</div>

</body>
</html>
